<!DOCTYPE html>
<html>

<head>
    <style>
        html {
            height: 100%;
        }

        body {
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        header {
            height: 50px;
            background-color: aqua;
        }

        main {
            flex: 1;
            background-color: aquamarine;
        }

        footer {
            background-color: antiquewhite;
            height: 50px;
        }
    </style>
</head>

<body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</body>

</html>